<template>
  <div>
    <h1>标题: {{ title.val }}</h1>
    <button @click="title.val += '!'">修改标题</button>
    <!-- 整个替换对象是有响应式，因为并不影响源数据 -->
    <button @click="title = { val: 999 }">替换标题</button>
    <hr>
    <h4>{{ person }}</h4>
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <h2>薪资: {{ job.j1.salary }}K</h2>
    <button @click="name += '!'">修改姓名</button>
    <button @click="age++">修改年龄</button>
    <button @click="job.j1.salary++">涨薪</button>
  </div>
</template>

<script>
import { ref, reactive, shallowRef, shallowReactive, toRefs } from "vue";
export default {
  name: "Demo",
  setup() {

/**
 * 什么时候使用?
     如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
     如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

 *  */   

    //shallowRef：浅层次的响应式， 保证必须传入的是基本数据类型的数据，否则value由proxy变为Object类型的数据，丢失了响应式
    //只处理基本数据类型的响应式, 不进行对象的响应式处理。
    let title = shallowRef({
      val: '你是风儿!'
    })
    // console.log(title);

    //shallowReactive:浅层次的响应式，只考虑第一层的响应式
    let person = shallowReactive({
      name: "张三",
      age: 25,
      job: {
        j1: {
          salary: 6,
        },
      },
    });

    return {
      title,
      person,
      ...toRefs(person),
    };
  },
};
</script>